<script lang="ts" setup>
import { ref } from 'vue'
import { WindowMinimise, WindowMaximise, WindowUnmaximise, Quit } from '../wailsjs/runtime/runtime'
import Calculator from './components/Calculator.vue'
import JsonFormatter from './components/JsonFormatter.vue'
import Base64Tool from './components/Base64Tool.vue'
import MysqlToProtobuf from './components/MysqlToProtobuf.vue'
import MysqlToGolang from './components/MysqlToGolang.vue'
import TimestampTool from './components/TimestampTool.vue'
import AesTool from './components/AesTool.vue'
import RsaTool from './components/RsaTool.vue'
import UrlTool from './components/UrlTool.vue'
import ColorTool from './components/ColorTool.vue'
import QrCodeTool from './components/QrCodeTool.vue'
import ApiTool from './components/ApiTool.vue'
import VideoTool from './components/VideoTool.vue'
import ScreenRecorder from './components/ScreenRecorder.vue'

const currentTool = ref('')
const isMaximised = ref(false)

const tools = [
  { id: 'calculator', name: '计算器', icon: '🧮', description: '简单的计算器工具' },
  { id: 'json', name: 'JSON格式化', icon: '📝', description: 'JSON格式化和验证工具' },
  { id: 'base64', name: 'Base64编解码', icon: '🔐', description: 'Base64加密解密工具' },
  { id: 'mysql2proto', name: 'MySQL转Protobuf', icon: '🔄', description: 'MySQL表结构转Protobuf消息' },
  { id: 'mysql-golang', name: 'MySQL转Golang', icon: '🐹', description: '将MySQL表结构转换为Golang结构体' },
  { id: 'timestamp', name: '时间戳转换', icon: '⏰', description: '时间戳与日期时间相互转换' },
  { id: 'aes', name: 'AES加解密', icon: '🔐', description: 'AES对称加密解密工具' },
  { id: 'rsa', name: 'RSA加解密', icon: '🔑', description: 'RSA非对称加密解密工具' },
  { id: 'url', name: 'URL编解码', icon: '🌐', description: 'URL编码解码工具' },
  { id: 'color', name: '调色板工具', icon: '🎨', description: '颜色格式转换和调色板' },
  { id: 'qrcode', name: '二维码工具', icon: '📱', description: '二维码生成和解析工具' },
  { id: 'api', name: 'API调试工具', icon: '🔧', description: 'HTTP接口测试和调试工具' },
  { id: 'video', name: '音视频剪辑', icon: '🎬', description: '视频剪切、格式转换、音频提取工具' },
  { id: 'screen-recorder', name: '录屏工具', icon: '🎥', description: '屏幕录制、区域录制、音频录制工具' }
]

function selectTool(toolId: string) {
  currentTool.value = toolId
}

function goHome() {
  currentTool.value = ''
}

function minimiseWindow() {
  WindowMinimise()
}

function maximiseWindow() {
  if (isMaximised.value) {
    WindowUnmaximise()
  } else {
    WindowMaximise()
  }
  isMaximised.value = !isMaximised.value
}

function closeWindow() {
  Quit()
}
</script>

<template>
  <div id="app">
    <!-- 自定义标题栏 -->
    <div class="titlebar" data-wails-drag>
      <div class="titlebar-left">
        <span class="app-title">便捷工具箱</span>
      </div>
      <div class="titlebar-right">
        <button class="titlebar-btn" @click="minimiseWindow" title="最小化">
          <svg width="12" height="12" viewBox="0 0 12 12">
            <rect x="2" y="5" width="8" height="2" fill="currentColor"/>
          </svg>
        </button>
        <button class="titlebar-btn" @click="maximiseWindow" :title="isMaximised ? '还原' : '最大化'">
          <svg width="12" height="12" viewBox="0 0 12 12" v-if="!isMaximised">
            <rect x="2" y="2" width="8" height="8" stroke="currentColor" stroke-width="1" fill="none"/>
          </svg>
          <svg width="12" height="12" viewBox="0 0 12 12" v-else>
            <rect x="2" y="3" width="6" height="6" stroke="currentColor" stroke-width="1" fill="none"/>
            <rect x="4" y="1" width="6" height="6" stroke="currentColor" stroke-width="1" fill="none"/>
          </svg>
        </button>
        <button class="titlebar-btn close-btn" @click="closeWindow" title="关闭">
          <svg width="12" height="12" viewBox="0 0 12 12">
            <path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content" data-wails-drag style="--wails-draggable:no-drag">
      <!-- 工具首页 -->
      <div v-if="!currentTool" class="home">
        <div class="header">
          <img id="logo" alt="MyTools logo" src="./assets/images/logo-universal.png"/>
          <h1>便捷工具箱</h1>
          <p>选择一个工具开始使用</p>
        </div>
        
        <div class="tools-grid">
          <div 
            v-for="tool in tools" 
            :key="tool.id"
            class="tool-card"
            @click="selectTool(tool.id)"
          >
            <div class="tool-icon">{{ tool.icon }}</div>
            <h3>{{ tool.name }}</h3>
            <p>{{ tool.description }}</p>
          </div>
        </div>
      </div>

      <!-- 工具页面 -->
      <div v-else class="tool-page">
        <div class="tool-header">
          <button class="back-btn" @click="goHome">← 返回首页</button>
          <h2>{{ tools.find(t => t.id === currentTool)?.name }}</h2>
        </div>
        
        <div class="tool-content">
          <Calculator v-if="currentTool === 'calculator'" />
          <JsonFormatter v-if="currentTool === 'json'" />
          <Base64Tool v-if="currentTool === 'base64'" />
          <MysqlToProtobuf v-if="currentTool === 'mysql2proto'" />
          <MysqlToGolang v-if="currentTool === 'mysql-golang'" />
          <TimestampTool v-if="currentTool === 'timestamp'" />
          <AesTool v-if="currentTool === 'aes'" />
          <RsaTool v-if="currentTool === 'rsa'" />
          <UrlTool v-if="currentTool === 'url'" />
          <ColorTool v-if="currentTool === 'color'" />
           <QrCodeTool v-if="currentTool === 'qrcode'" />
           <ApiTool v-if="currentTool === 'api'" />
           <VideoTool v-if="currentTool === 'video'" />
           <ScreenRecorder v-if="currentTool === 'screen-recorder'" />
        </div>
      </div>
    </div>
  </div>
</template>

<style>
#app {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 自定义标题栏样式 */
.titlebar {
  height: 32px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.titlebar-left {
  display: flex;
  align-items: center;
}

.app-title {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.titlebar-right {
  display: flex;
  align-items: center;
  gap: 1px;
}

.titlebar-btn {
  width: 46px;
  height: 32px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.titlebar-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.titlebar-btn.close-btn:hover {
  background: #e81123;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
  /* 拖拽区域样式 */
  -webkit-app-region: drag;
}

/* 确保交互元素不被拖拽影响 */
.main-content button,
.main-content input,
.main-content textarea,
.main-content select,
.main-content .tool-card,
.main-content .tool-content {
  -webkit-app-region: no-drag;
}

.home {
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

#logo {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5em;
  color: #fff;
}

.header p {
  margin: 0;
  color: #ccc;
  font-size: 1.1em;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.tool-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tool-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.tool-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.tool-card h3 {
  margin: 0 0 10px 0;
  color: #fff;
  font-size: 1.3em;
}

.tool-card p {
  margin: 0;
  color: #ccc;
  font-size: 0.9em;
  line-height: 1.4;
}

.tool-page {
  max-width: 1000px;
  margin: 0 auto;
}

.tool-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  gap: 20px;
}

.back-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tool-header h2 {
  margin: 0;
  color: #fff;
  font-size: 1.8em;
}

.tool-content {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
